package ;

import easelhx.display.Bitmap;
import easelhx.display.Shape;
import easelhx.filters.BoxBlurFilter;
import easelhx.filters.ColorMatrix;
import easelhx.filters.ColorMatrixFilter;
import easelhx.js.Image;
import easelhx.utils.Ticker;

/**
 * ...
 * @author 
 */

class MasksExample extends Example
{
	private var img:Image;
	private var star:Shape;

	public function new() 
	{
		super();
	}
	
	override public function run():Void 
	{
		super.run();
		
		img = new Image();
		img.onload = handleImageLoad;
		img.src = "assets/photo.jpg";
	}
	
	private function handleImageLoad() : Void
	{
		// masks can only be shapes.
		star = new Shape();
		// the mask's position will be relative to the parent of its target:
		star.x = img.width/2;
		star.y = img.height/2;
		// only the drawPolyStar call is needed for the mask to work:
		star.graphics.beginStroke("#FF0").setStrokeStyle(5).drawPolyStar(0,0,img.height/2-15,5,0.6).closePath();
		
		var bg:Bitmap = new Bitmap(img);
		// blur and desaturate the background image:
		bg.filters = [new BoxBlurFilter(2,2,2), new ColorMatrixFilter(new ColorMatrix(0,0,-100,0))];
		bg.cache(0,0,img.width,img.height);
		stage.addChild(bg);
		
		var bmp:Bitmap = new Bitmap(img);
		stage.addChild(bmp);
		bmp.mask = star;
		
		// note that the shape can be used in the display list as well if you'd like, or
		// we can reuse the Graphics instance in another shape if we'd like to transform it differently.
		stage.addChild(star);

		Ticker.addListener(this);
	}
	
	private function tick() : Void
	{
		star.rotation += 5;
		stage.update();
	}
	
}